<template>
  <div :style="hiddenStyle">
    <detail-banner @bodyHidden="banScroll" @bodyShow="allowScroll" :placeDetailList="placeDetailList"></detail-banner>
    <detail-header></detail-header>
    <detail-list :ticketList="ticketList"></detail-list>
    <div class="test"></div>
  </div>
</template>

<script>
import detailBanner from './components/Banner'
import detailHeader from './components/Header'
import detailList from './components/List'
import axios from 'axios'
export default {
  name: 'Detail',
  components: {
    detailBanner,
    detailHeader,
    detailList
  },
  async mounted () {
    let id = this.$route.params.id
    const { data: res } = await axios.get(`/api/detail${id}.json`, {
      params: {
        id
      }
    })
    this.placeDetailList = res.placeDetailList
  },
  data () {
    return {
      placeDetailList: [],
      detailSwiper: [],
      hiddenStyle: {},
      ticketList: [
        {
          title: '成人票',
          children: [
            {
              title: '成人VIP',
              children: [
                {
                  title: '普通VIP'
                },
                {
                  title: '白金VIP'
                },
                {
                  title: 'VIP中P',
                  children: [
                    {
                      title: 'VIP中P之至尊VIP'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          title: '儿童票'
        },
        {
          title: '优待票',
          children: [
            {
              title: '军人票'
            },
            {
              title: '残疾人票'
            }
          ]
        },
        {
          title: '婴幼儿票'
        }
      ]
    }
  },
  methods: {
    banScroll () {
      this.hiddenStyle = {
        overflow: 'hidden',
        height: '100vh'
      }
    },
    allowScroll () {
      this.hiddenStyle = {}
    }
  }
}
</script>

<style lang="stylus" scoped>
.test {
  height: 30rem
}
</style>
